<el-form label-position="left" label-width="80px" ref="form" :model="form" :rules="rules">
    <el-form-item label="商品规格" prop="spec">
        <el-radio v-model="form.spec" label="1">单规格</el-radio>
        <el-radio v-model="form.spec" label="2">多规格</el-radio>
    </el-form-item>
    <div v-if="form.spec == 1">
        <el-form-item label="售价">
            <el-input type="number" v-model="form.price" style="width:500px"></el-input> 元
        </el-form-item>
        <el-form-item label="划线价">
            <el-input type="number" v-model="form.original_price" style="width:500px"></el-input> 元
        </el-form-item>
        <el-form-item label="成本价">
            <el-input type="number" v-model="form.cost_price" style="width:500px"></el-input> 元
        </el-form-item>
        <el-form-item label="库存">
            <el-input type="number" v-model="form.stock" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
            <el-input type="number" v-model="form.spu" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="重量">
            <el-input type="number" v-model="form.weight" style="width:500px"></el-input> KG
        </el-form-item>
        <el-form-item label="体积">
            <el-input type="number" v-model="form.volume" style="width:500px"></el-input> m³
        </el-form-item>
    </div>
    <div style="margin-bottom: 20px" v-else>
        <el-form-item label="选择规格">
            <el-select v-model="selectRule" placeholder="请选择" style="width: 300px" @change="handleSelectRule" size="small">
                <el-option
                        v-for="item in rule"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <!--<el-button icon="el-icon-plus" type="primary" size="small">添加新规格</el-button>-->
        </el-form-item>
        <div class="table-box">
            <div style="float: right;margin-bottom: 10px">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="addRule">新的规格</el-button>
                <el-button type="primary" icon="el-icon-s-opportunity" size="small" @click="makeRule">生成属性</el-button>
            </div>
            <el-table
                    :data="preItem"
                    border
                    style="width: 100%">
                <el-table-column
                        label="规格名"
                        width="200">
                    <template slot-scope="scope">
                        <el-input placeholder="规格名" style="width: 150px" v-model="scope.row.title"></el-input>
                        <i class="el-icon-delete del-btn" @click="delTitle(scope.$index)"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        label="规格值">
                    <template slot-scope="scope">
                        <div style="width: 180px;float: left;margin-top: 5px;" v-for="(vo,index) in scope.row.item" :key="index">
                            <el-input placeholder="规格值" style="width: 150px" v-model="scope.row.item[index]"></el-input>
                            <i class="el-icon-delete del-btn" @click="delItem(scope.$index, index)"></i>
                        </div>
                        <i class="el-icon-plus add-btn" @click="addNewItem(scope.$index)">添加</i>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="final.length > 0">
                <el-form-item label="批量设置" style="margin-top: 10px">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="batchDialogVisible = true">图片</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('price', '售价')">售价</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('cost_price', '成本价')">成本价</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('original_price', '原价')">原价</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('stock', '库存')">库存</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('spu', '商品编号')">商品编号</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('weight', '重量')">重量</el-button>
                        <el-button type="primary" size="mini" @click="setBatch('volume', '体积')">体积</el-button>
                    </el-button-group>
                </el-form-item>
                <el-table
                        :data="final"
                        border
                        style="width: 100%">
                    <el-table-column v-for="item,index in tableHead" :label="item.label" width="150" :key="index">
                        <template slot-scope="scope">
                            {{ scope.row.sku[item.property] }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="图片"
                            width="100">
                        <template slot-scope="scope">
                            <div class="up-item-img" v-if="scope.row.image == ''" @click="setOneImg(scope.$index)"><i class="el-icon-plus"></i></div>
                            <img style="width: 50px; height: 45px" :src="scope.row.image" v-if="scope.row.image">
                            <div class="img-tools" v-if="scope.row.image" @click="rmImg(scope.$index)"><i class="el-icon-delete" style="font-size: 14px; color: rgb(255, 255, 255);"></i></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="售价"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.price" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="成本价"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.cost_price" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="原价"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.original_price" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="库存"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品编号"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.spu"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="重量(KG)"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.weight" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="体积(m³)"
                            width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.volume" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            fixed="right"
                            width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleDel(scope.$index)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <el-alert
            style="width: 600px"
            title="选择规格之后，点击 '生成属性' 则可以自动生成商品的属性列表。"
            type="warning"
            :closable="false">
    </el-alert>
    <el-form-item style="margin-top: 10px">
        <el-button @click="pre" size="small">上一步</el-button>
        <el-button type="primary" @click="ruleNext" size="small">下一步</el-button>
        <el-button type="primary" @click="saveGoods" size="small" v-if="form.id > 0">保存</el-button>
    </el-form-item>

    <el-dialog :title="`设置${batchTitle}`" :visible.sync="batchVisible" width="500px">
        <el-form :model="batchForm" label-width="80px">
            <el-form-item :label="batchTitle">
                <el-input v-model="batchForm.field" autocomplete="off" v-if="batchTitle == '商品编号'"></el-input>
                <el-input v-model="batchForm.field" autocomplete="off" type="number" v-else></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="batchVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="batchFormSubmit" size="small">确 定</el-button>
        </div>
    </el-dialog>
</el-form>